<template>
  <div class="libIncrease">
    <center-border :text="libText" :show="true" :options="options" @change="handleChange">
      <div class="content" ref="libEcharts"></div>
    </center-border>
  </div>
</template>

<script>
import centerBorder from "./centerBorder.vue";
import { connrequest } from "@/api/firstPage";
import dayjs from "dayjs";
import Cookies from "js-cookie";

export default {
  name: "libIncrease",
  components: {
    centerBorder
  },
  mounted() {
    this.getDictKnowledgeSumGroupByDate().then(() => {
      this.createChart();
    });
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
  data() {
    return {
      libText: "企业智库增长趋势图",
      options: [
        { value: "1", label: "最近一周" },
        { value: "2", label: "最近半月" },
        { value: "3", label: "最近一月" }
      ],
      kbSumX: [],
      kbSumY: []
    };
  },
  methods: {
    createChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = this.$echarts.init(this.$refs.libEcharts);
      const option = {
        // 移除标题，因为图中没有“同期数据变化”
        title: {
          text: "单位：--",
          left: "left",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "normal"
          }
        },

        // ... 其他配置项
        legend: {
          data: [
            {
              name: "同期",
              icon: "rect", // 矩形图标
              itemStyle: {
                color: {
                  type: "linear", // 线性渐变
                  x: 0, // 渐变起点 x 坐标
                  y: 0, // 渐变起点 y 坐标
                  x2: 1, // 渐变终点 x 坐标
                  y2: 0, // 渐变终点 y 坐标（水平渐变）
                  colorStops: [
                    {
                      offset: 0,
                      color: "#5470c6" // 起点颜色
                    },
                    {
                      offset: 1,
                      color: "#24cd9c" // 终点颜色
                    }
                  ],
                  global: false // 默认局部渐变
                }
              }
            }
          ],
          right: 10,
          top: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
          itemWidth: 14,
          itemHeight: 2,
          itemGap: 10 // 增加图例项之间的间距
        },
        // 鼠标悬停提示框
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          borderColor: "#fff",
          textStyle: {
            color: "#fff"
          }
        },
        // 网格设置
        grid: {
          left: 0,
          bottom: 0,
          right: "10px",
          containLabel: true,
          backgroundColor: "#141726" // 深色背景
        },
        // X 轴设置
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.kbSumX.map((item) => dayjs(item).format("MM-DD")), // 与图中一致
          axisLine: {
            show: false // 隐藏轴线
          },
          axisTick: {
            show: false // 隐藏刻度
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#4a4f69",
              type: "dashed",
              opacity: 0.5
            }
          }
        },
        // Y 轴设置
        yAxis: {
          type: "value",
          axisLine: {
            show: false // 隐藏轴线
          },
          axisTick: {
            show: false // 隐藏刻度
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#4A4F69", // 网格线颜色
              type: "dashed" // 虚线
            }
          }
        },
        // 数据系列
        series: [
          {
            name: "同期",
            type: "line",
            data: this.kbSumY, // 根据图中曲线调整数据
            smooth: true, // 平滑曲线
            lineStyle: {
              color: "#29feb4", // 曲线颜色
              width: 2
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#125e58" }, // 渐变起始颜色
                { offset: 1, color: "rgba(0, 196, 180, 0)" } // 渐变结束颜色
              ])
            },
            emphasis: {
              focus: "series"
            },
            // 使用 series.markLine 添加 Y=0 处的实线
            markLine: {
              silent: true, // 不响应鼠标事件
              symbol: ["none", "none"], // 不显示两端的箭头或标记
              label: {
                show: false // 隐藏标签（即不显示“0”）
              },
              data: [
                {
                  yAxis: 0, // 在 Y=0 处绘制水平线
                  lineStyle: {
                    color: "#4A4F69", // 红色实线，与目标图一致
                    type: "solid", // 实线
                    width: 1 // 线宽
                  }
                }
              ]
            }
          }
        ]
        // 移除 tooltip 和 dataZoom，因为图中没有这些功能
      };
      this.chart.setOption(option);
    },
    async getDictKnowledgeSumGroupByDate(days) {
      let defaultLogDay;
      if (days) {
        defaultLogDay = days;
      } else {
        defaultLogDay = Cookies.get("defaultLogDay") || 7;
      }
      const data = {
        Filter: {
          StartTime: dayjs().add(-defaultLogDay, "day").format("YYYY-MM-DD") + " 00:00:00",
          EndTime: ""
        }
      };
      const res = await connrequest("GetDictKnowledgeSumGroupByDate", data);
      if (res.Status.StatusCode === 0) {
        this.kbSum = res.Data || [];
        this.kbSumX = [];
        this.kbSumY = [];
        for (let i = 0; i < defaultLogDay + 1; i++) {
          this.kbSumX.unshift(dayjs().add(-i, "day").format("YYYY-MM-DD"));
        }
        
        this.kbSumX.forEach((item) => {
          const t1 = this.kbSum.find((v) => v.Name === item);
          if (t1) {
            this.kbSumY.push(t1.Count);
          } else {
            this.kbSumY.push(0);
          }
        });
      }
      if (this.chart) {
        this.chart.dispose();
      }
      this.createChart();
    },
    handleChange(value) {
      switch (value) {
        case "1":
          this.getDictKnowledgeSumGroupByDate(7);
          break;
        case "2":
          this.getDictKnowledgeSumGroupByDate(15);
          break;
        case "3":
          this.getDictKnowledgeSumGroupByDate(30);
          break;
        default:
          this.getDictKnowledgeSumGroupByDate(7);
      }
    }
  }
};
</script>

<style scoped>
.libIncrease {
  height: 35%;
}
.content {
}
</style>
